<template>
  <div class="profileContainer">
    <HeaderTop :title="title" :bg="bg" :color="color">
      <router-link to="/" class="header_left" slot="left">
        <i class="iconfont icon-arrow-left"></i>
      </router-link>
    </HeaderTop>
    <div class="main" ref="main">
      <div class="main-inner">
        <section class="userInfo">
          <div class="inner" v-if="userInfo">
            <router-link :to="userInfo._id ? '/userInfo' : '/login'" class="userInfo-top">
              <div class="avatar">
                <img
                  src="./images/avatar.jpg"
                  alt="">
              </div>
              <div class="personal-content">
                <p class="name">
                  <span v-if="!userInfo.phone">{{ userInfo.username || '登录 / 注册'}}</span>
                </p>
                <p class="phone">
                  <span>{{ userInfo.phone || '暂无绑定手机号'}}</span>
                </p>
              </div>
            </router-link>
            <div class="userInfo-bottom">
              <div class="inner">
                <div class="title">
                  <div class="plus-title">享最高10倍京豆返利</div>
                  <div class="plus-subtitle">立即查看</div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="order">
          <div class="inner">
            <div class="order-item">
              <div class="img">
                <img src="./images/fukuan.png">
              </div>
              <span>待付款</span>
            </div>
            <div class="order-item">
              <div class="img">
                <img src="./images/shouhuo.png">
              </div>
              <span>待收货</span>
            </div>
            <div class="order-item">
              <div class="img">
                <img src="./images/tuihuan.png">
              </div>
              <span>退还 / 售后</span>
            </div>
            <div class="order-item">
              <div class="img">
                <img src="./images/all_order.png">
              </div>
              <span>全部订单</span>
            </div>
          </div>
        </section>
        <section class="assets">
          <div class="inner">
            <div class="assets-item">
              <div class="title">
                <span class="big">4</span>
                <span class="small">张</span>
              </div>
              <span>京东券</span>
            </div>
            <div class="assets-item">
              <div class="title">
                <span class="big">3510.33</span>
                <span class="small">元</span>
              </div>
              <span>白条额度</span>
            </div>
            <div class="assets-item">
              <div class="title">
                <span class="big">745</span>
                <span class="small">个</span>
              </div>
              <span>京豆</span>
            </div>
            <div class="assets-item">
              <div class="title">
                <span class="big">0</span>
                <span class="small">元</span>
              </div>
              <span>红包</span>
            </div>
            <div class="assets-item assets-all">
              <div class="img">
                <img src="https://img11.360buyimg.com/jdphoto/s40x40_jfs/t20329/11/1228908740/243/73a7934c/5b235f37Ne85fdb85.png">
              </div>
              <span>京东券</span>
            </div>
          </div>
        </section>
        <section class="collection">
          <div class="inner">
            <div class="collection-item">
              <div class="title">
                <span>29</span>
              </div>
              <span class="content">商品收藏</span>
            </div>
            <div class="collection-item">
              <div class="title">
                <span>10</span>
              </div>
              <span class="content">店铺收藏</span>
            </div>
            <div class="collection-item">
              <div class="title">
                <span>4</span>
              </div>
              <span class="content">我的足迹</span>
            </div>
          </div>
        </section>
        <section class="tools">
          <div class="inner">
            <div class="tools-item">
              <div class="title">
                <img src="./images/naoling.png">
              </div>
              <span class="content">我的预约</span>
            </div>
            <div class="tools-item">
              <div class="title">
                <img src="./images/train.png">
              </div>
              <span class="content">京东火车票</span>
            </div>
            <div class="tools-item">
              <div class="title">
                <img src="./images/app.png">
              </div>
              <span class="content">应用推荐</span>
            </div>
            <div class="tools-item">
              <div class="title">
                <img src="./images/yinyeting.png">
              </div>
              <span class="content">京东通信营业厅</span>
            </div>
            <div class="tools-item">
              <div class="title">
                <img src="./images/hongbao.png">
              </div>
              <span class="content">用户福利</span>
            </div>
            <div class="tools-item">
              <div class="title">
                <img src="./images/feiji.png">
              </div>
              <span class="content">京东机票</span>
            </div>
            <div class="tools-item">
              <div class="title">
                <img src="./images/jiudian.png">
              </div>
              <span class="content">京东酒店</span>
            </div>
          </div>
        </section>
        <section class="service">
          <div class="inner">客户服务</div>
        </section>
        <section class="logout" v-if="userInfo._id">
          <mt-button type="danger" size="large" @click="logout">退出登录</mt-button>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import { MessageBox, Toast } from 'mint-ui'
  import BScroll from 'better-scroll'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  export default {
    data () {
      return {
        title: '个人中心',
        bg: '#fff',
        color: '#222'
      }
    },
    created () {
      this.$nextTick(() => {
        this.setMainHeight()
      })
    },
    async mounted () {
      await this.$store.dispatch('getUserInfo')
    },
    computed: {
      ...mapState(['userInfo'])
    },
    methods: {
      // 登出
      logout () {
        MessageBox.confirm('确定退出吗?').then(
          action => {
            // 请求退出
            this.$store.dispatch('logout')
            localStorage.removeItem('userId')
            Toast('登出成功')
            this.$router.replace('/index')
          },
          action => {
            console.log('取消退出')
          }
        )
      },
      _initBScroll () {
        new BScroll('.main', {
          scrollY: true, // Y轴滚动
          scrollBar: true, // 滚动条
          bounce: false, // 禁止回弹
          probeType: 2
        })
      },
      setMainHeight () {
        const main = this.$refs.main
        const docH = document.documentElement.clientHeight
        main.style.height = docH - 94 + 'px'
      },
    },
    components: {
      HeaderTop
    },
    watch: {
      userInfo (value) {
        this.$nextTick(() => {
          this._initBScroll()
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl";
  .profileContainer
    width: 100%
    overflow hidden
    margin-bottom 60px
    .main
      width 100%
      margin-top 44px
      bg(#f1f1f1)
      overflow hidden
      .userInfo
        height 139px
        overflow hidden
        position relative
        .inner
          box-shadow 0 2px 4px rgba(228,57,60,.4)
          bg(-webkit-gradient(linear,left top,right top,from(#eb3c3c),to(#ff7459)))
          .userInfo-top
            border-box()
            height 97px
            padding 25px 15px 10px
            .avatar
              size(60px, 60px)
              fl()
              border-radius 50%
              overflow hidden
              img
                size(100%, 100%)
            .personal-content
              size(100%, 100%)
              color(#fff)
              border-box()
              padding-left: 75px
              .name
                margin-top 6px
                span
                  color(#fff)
                  fz(16px)
              .phone
                margin-top 8px
                span
                  color(#fff)
                  fz(14px)
          .userInfo-bottom
            border-box()
            height 37px
            padding 0 20px
            .inner
              width 100%
              height 37px
              bgi('./images/bg.png')
              bgs(100%, 37px)
              color(#ffe678)
              fz(12px)
              .title
                position: relative
                &::before
                  content: ''
                  display: block
                  position: absolute
                  size(57px, 12px)
                  bgi('./images/plus.png')
                  bgs(57px, 12px)
                  top 10px
                  left 8px
                .plus-title
                  position relative
                  padding-left 78px
                  top 7px
                .plus-subtitle
                  position absolute
                  padding-right 10px
                  height 18px
                  right 8px
                  top 8px
                  &::after
                    content ''
                    display block
                    position absolute
                    width 6px
                    height 6px
                    border-top 2px solid #ffe678
                    border-right 2px solid #ffe678
                    transform rotate(45deg)
                    right 0
                    top 6px
      .order
        width: 100%
        bg(#fff)
        height 72px
        margin 10px 0 14px
        .inner
          clearFix()
          .order-item
            size(25%, 72px)
            fl()
            .img
              height 30px
              margin-top 10px
              margin-bottom 8px
              img
                size(20px, 20px)
                center-auto()
            span
              fz(12px)
              center-text()
              display block
            &:last-child
              position relative
              &::before
                content ''
                display block
                position absolute
                top 0
                left 0
                width 10px
                height 72px
                bgi('http://wuhaitong.xyz/jd/assets/images/line.png')
                bgs(10px, 72px)
      .assets
        bg(#fff)
        height 72px
        overflow hidden
        margin 10px 0 14px
        .inner
          clearFix()
          .assets-item
            size(20%, 72px)
            fl()
            .title
              center-text()
              color(#e93b3d)
              line-height 30px
              height 30px
              margin-top 10px
              margin-bottom 8px
              span
                display inline-block
              .big
                fz(14px)
              .small
                fz(12px)
            > span
              fz(12px)
              center-text()
              display block
            &:last-child
              position relative
              &::before
                content ''
                display block
                position absolute
                top 0
                left 0
                width 10px
                height 72px
                bgi('http://wuhaitong.xyz/jd/assets/images/line.png')
                bgs(10px, 72px)
          .assets-all
            .img
              height 30px
              margin-top 10px
              margin-bottom 8px
              img
                size(20px, 20px)
                center-auto()
      .collection
        bg(#fff)
        height 72px
        overflow hidden
        margin 10px 0 14px
        .inner
          clearFix()
          .collection-item
            size(33.3333%, 72px)
            fl()
            .title
              center-text()
              color(#000)
              font-weight bold
              line-height 30px
              height 30px
              margin-top 8px
              margin-bottom 8px
              span
                display inline-block
            .content
              fz(12px)
              color(#666)
              center-text()
              display block
      .tools
        bg(#fff)
        height 130px
        overflow hidden
        margin 10px 0 14px
        .inner
          clearFix()
          .tools-item
            size(25%, 65px)
            fl()
            border-box()
            padding 10px 0 8px
            .title
              size(20px, 20px)
              margin 0 auto 7px
              img
                size(100%, 100%)
            .content
              fz(12px)
              color(#666)
              center-text()
              lh(20px)
              display block
      .service
        size(100%, 45px)
        bg(#fff)
        border-box()
        fz(14px)
        color(#666)
        lh(45px)
        padding 0 15px
        .inner
          position relative
          &::after
            size(8px, 8px)
            content ''
            display block
            position absolute
            top 50%
            right 0
            border-top 2px solid #ccc
            border-right 2px solid #ccc
            transform translateY(-50%) rotate(45deg)
      .logout
        margin-top 20px
</style>
